<template>
    <a-tabs
        v-model="activeKey"
        tab-position="left"
        size="large"
    >
        <a-tab-pane :tab="i18n('list.searchField','筛选条件')" key="searchField" :closable="false">
            <rx-fit style="padding-top: 8px">
                <div slot="toolheader" foldbtn="false" border="false">
                    <div class="title-bar">
                        <div class="right">
                            <a-button @click="addSearchRow" :size="'small'" type="primary">{{i18n('list.newSearchField','新增搜索字段')}}</a-button>
                            <a-button @click="removeRow" :size="'small'" :type="'danger'" style="margin-left: 10px">{{$ti18('rxList.delBtn','删除')}}</a-button>
                        </div>
                    </div>
                </div>
                <rx-grid
                    style="margin-top: 10px"
                    ref="table_searchField"
                    :dataSource="searchFields"
                    :columns="searchColumns"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :showPage="false"
                    :bordered="true"
                >
                  <span slot="tablePre" slot-scope="{ text, record, index }">
                      <a-input v-model="record.tablePre" />
                  </span>
                    <span slot="fieldName" slot-scope="{ text, record, index }">
                      <a-select show-search v-model="record.fieldName"
                                option-filter-prop="children" :filter-option="filterOption"
                                @focus="fieldFocus(record)"
                                :dropdown-menu-style="{width:'250px'}"
                                :dropdownMatchSelectWidth="false"
                                @change="changeFieldName($event,record,'fieldLabel')"
                                :options="fieldDataAll">
                      </a-select>
                    </span>
                    <span slot="fieldLabel" slot-scope="{ text, record, index }">
                <a-input v-model="record.fieldLabel" />
            </span>
                    <span slot="fc" slot-scope="{ text, record, index }">
                <a-select
                    v-model="record.fc"
                    :options="fieldControls"
                    @change="fcChange($event,record)"
                ></a-select>
            </span>
                    <span slot="op" slot-scope="{ text, record, index }">
                        <a-select mode="multiple" v-model="record.op" @change="opChange($event,record)" :options="opDataOptions[record.fc]"></a-select>
                    </span>
                    <span slot="searchSetting" slot-scope="{ text, record, index }">
                <a-button @click="showSearchViewConfig(record)">{{i18n('list.config','配置')}}</a-button>
                <span v-if="record.isSeted" class="is-seted"><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('list.configured','已配')}}</span>
            </span>
                </rx-grid>
            </rx-fit>
        </a-tab-pane>
        <a-tab-pane forceRender :tab="i18n('list.sysView','系统视图')" key="searchView" :closable="false">
            <rx-fit style="padding-top: 8px">
                <div class="search-view-seted-box">
                    <div style="display: flex;">
                        <div style="padding-right: 20px;">
                            <a-form-item :label="i18n('list.isShowView','是否开启视图')">
                                <a-switch v-model="isShowView" size="small"/>
                                <a-tooltip placement="bottomLeft">
                                <span slot="title">
                                    {{i18n('msg.isShowViewTip','先配置【筛选条件】，再配置查询视图')}}
                                </span>
                                    <a-icon style="margin-left: 5px;" type="question-circle-o"/>
                                </a-tooltip>
                            </a-form-item>

                        </div>
                        <div>
                            <a-form-item :label="i18n('list.viewStyle','查询视图风格')">
                                <a-radio-group :placeholder="i18n('list.viewStyle','查询视图风格')" v-model="showSearchViewStyle">
                                    <a-radio value="NO">{{i18n('list.pack','默认收起')}}</a-radio>
                                    <a-radio value="YES">{{i18n('list.putTop','放列表顶部tab标签')}}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>
                    <div class="title-bar">
                        <div class="right">
                            <a-button @click="showSearchViewEdit()" type="primary" :size="'small'">{{i18n('list.addSelView','新增查询视图')}}</a-button>
                            <a-button @click="removeRow" :size="'small'" :type="'danger'" style="margin-left: 10px" >{{$ti18('rxList.delBtn','删除')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="upRow"> {{i18n_2('isButton.upward','向上')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="downRow">{{i18n_2('isButton.downward','向下')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="topUp">{{ i18n_1('list.topUp', '置顶') }}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="bottomUp">{{ i18n_1('list.bottomUp', '置底') }}</a-button>
                        </div>
                    </div>

                </div>
                <rx-grid
                    ref="table_searchView"
                    :dataSource="searchFields1"
                    :columns="searchColumns1"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :showPage="false"
                    :bordered="true"
                    style="height: 86%;"
                >
                    <span slot="defautView" slot-scope="{ text, record, index }">
                        <a-switch @change="defaultViewChange($event,record)" v-model="record.defaultView"/>
                    </span>
                    <span slot="isShow" slot-scope="{ text, record, index }">
                        <a-switch :disabled="record.defaultView" @change="isShowChange($event,record)" v-model="record.isShow"/>
                    </span>
                    <span slot="searchViewSetting" slot-scope="{ text, record, index }">
                        <a-button @click="showSearchViewEdit(record)">{{$ti18('rxList.editBtn','编辑')}}</a-button>
                    </span>
                </rx-grid>
            </rx-fit>
        </a-tab-pane>
        <a-tab-pane forceRender :tab="i18n('list.groupDimen','分组维度')" key="searchGroup" :closable="false">
            <rx-fit style="padding-top: 8px">
                <div slot="toolheader" foldbtn="false" border="false">
                    <div class="title-bar">
                        <div class="right">
                            <a-button @click="addSearchGroupRow" :size="'small'" type="primary">{{i18n('list.newGroupField','新增分组字段')}}</a-button>
                            <a-button @click="removeRow" :size="'small'" :type="'danger'" style="margin-left: 10px">{{$ti18('rxList.delBtn','删除')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="upRow"> {{i18n_2('isButton.upward','向上')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="downRow">{{i18n_2('isButton.downward','向下')}}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="topUp">{{ i18n_1('list.topUp', '置顶') }}</a-button>
                            <a-button class="rx-modile-button" :size="'small'" @click="bottomUp">{{ i18n_1('list.bottomUp', '置底') }}</a-button>
                        </div>
                    </div>
                </div>
                <rx-grid
                    style="margin-top: 10px"
                    ref="table_searchGroup"
                    :dataSource="searchGroups"
                    :columns="searchGroupColumns"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :showPage="false"
                    :bordered="true"
                >
                    <span slot="fieldName" slot-scope="{ text, record, index }">
                      <a-select v-model="record.fieldName"
                                @change="changeFieldName($event,record,'fieldLabel')"
                                :options="fieldDataAll">
                      </a-select>
                    </span>
                    <span slot="fieldLabel" slot-scope="{ text, record, index }">
                        <a-input v-model="record.fieldLabel" />
                    </span>
                    <span slot="searchSetting" slot-scope="{ text, record, index }">
                      <a-button @click="showSearchGroupViewConfig(record)">{{i18n('list.config','配置')}}</a-button>
                      <span v-if="record.isSeted" class="is-seted"><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('list.configured','已配')}}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
import FormBoListEdit2 from '@/api/form/core/formBoListEdit2'
import {BaseForm, Util,Dialog} from "@lowcode/jpaas-common-lib"

export default {
    name: 'FormBoListEditSearchView',
    mixins: [BaseForm, FormBoListEdit2],
    props: ['boListId','curAppObj', 'fieldDataAll'],
    data() {
        return {
            activeKey:'searchField',
            showSearchViewStyle: "NO",
            isShowView: true,
            searchFields: [],
            searchFields1: [],
            searchGroups:[],
            searchColumns: [
                {
                    title: this.i18n('form.tablePrefix','表前缀'),
                    dataIndex: 'tablePre',
                    scopedSlots: {customRender: 'tablePre'},
                    width: 120,
                },
                {
                    title: this.i18n('form.searchField','搜索字段'),
                    dataIndex: 'fieldName',
                    scopedSlots: {customRender: 'fieldName'},
                    width: 120,
                },
                {
                    title: this.i18n('form.label','标签'),
                    dataIndex: 'fieldLabel',
                    scopedSlots: {customRender: 'fieldLabel'},
                    width: 120,
                },
                {
                    title: this.i18n('form.controlType','控件类型'),
                    dataIndex: 'fc',
                    scopedSlots: {customRender: 'fc'},
                    width: 120,
                },
                {
                    title: this.i18n('form.comparator','比较符（多选）'),
                    dataIndex: 'op',
                    scopedSlots: {customRender: 'op'},
                    width: 120,
                },
                {
                    title: this.i18n('form.searchSetting','搜索配置'),
                    dataIndex: 'searchSetting',
                    scopedSlots: {customRender: 'searchSetting'},
                    width: 120,
                },
            ],
            searchGroupColumns:[
                {
                    title: this.i18n('form.groupField','分组字段'),
                    dataIndex: 'fieldName',
                    scopedSlots: {customRender: 'fieldName'},
                    width: 120,
                },
                {
                    title: this.i18n('form.label','标签'),
                    dataIndex: 'fieldLabel',
                    scopedSlots: {customRender: 'fieldLabel'},
                    width: 120,
                },
                {
                    title: this.i18n('form.groupConfig','分组配置'),
                    dataIndex: 'searchSetting',
                    scopedSlots: {customRender: 'searchSetting'},
                    width: 120,
                }
            ],
            searchColumns1: [
                {
                    title: this.i18n('form.viewName','查询视图名称'),
                    dataIndex: 'name',
                    width: 120,
                },
                {
                    title: this.i18n('form.defautView','设置为默认视图'),
                    dataIndex: 'defautView',
                    scopedSlots: {customRender: 'defautView'},
                    width: 120,
                },
                {
                    title: this.i18n('form.isShow','是否显示'),
                    dataIndex: 'isShow',
                    scopedSlots: {customRender: 'isShow'},
                    width: 120,
                },
                {
                    title: this.i18n('form.searchViewSet','查询视图配置'),
                    dataIndex: 'searchViewSetting',
                    scopedSlots: {customRender: 'searchViewSetting'},
                    width: 120,
                },
            ],
            curRecord: {},
            maxSn:0
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoList", key);
        },
        i18n_1(name,text,key){
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        i18n_2(name,text,key){
            return this.$ti18(name,text,"FormCalendarView",key);
        },
        fcChange(value,record){
            record.opData=this.opDataOptions[value];
            record.op=record.opData.map(item=>{
              return item.value;
            });
            record.gridData=[];
        },
        opChange(value,record){
            var ary=this.opDataOptions[record.fc];
            var opData=[];
            for(var i=0;i<ary.length;i++){
                let obj=ary[i];
                if(value.includes(obj.value)) {
                    opData.push(obj);
                }
            }
            record.opData=opData;
        },
        changeFieldName(value,record,header){
            if(record["searchField"] && record["searchField"].change){
                record["searchField"].change=false;
                value=record["searchField"];
                if(header) {
                    record[header] = value;
                }
            }
            var flag=false;
            for(var i=0;i<this.fieldDataAll.length;i++){
                if(this.fieldDataAll[i].value==value){
                    record.dataType=this.fieldDataAll[i].key;
                    record.dataType_name=this.getDataTypeName(record.dataType);
                    if(header) {
                        record[header] = this.fieldDataAll[i].label;
                    }
                    flag=true;
                    break;
                }
            }
            if(!flag){
                record.dataType='string';
                record.dataType_name=this.i18n('list.string','字符');
            }
        },
        //搜索条件表格方法
        addSearchRow() {
            this.addRow({
                fcExt: {key: 'textbox', label: this.i18n('list.textBox','文本框')},
                fc: 'textbox',
                fc_name: this.i18n('list.textBox','文本框'),
                fieldExt: '',
                op:this.opDataOptions['textbox'].map(item=>{
                  return item.value;
                }),
                opData:this.opDataOptions['textbox']
            })
        },
        addRow(row) {
            this.$refs['table_'+this.activeKey].addRow(row)
        },
        addSearchGroupRow(){
            this.addRow({
                from:'distinct',
                fieldExt:''
            })
        },
        removeRow() {
            var table = this.$refs['table_'+this.activeKey]
            table.removeRows()
            table.selectedRowKeys = []
            table.selectedRows = []
            this.handDataSourceSn();
            this.$forceUpdate()
        },
        setData(data) {
            if (!data) {
                return;
            }
            this.showSearchViewStyle = data.showSearchViewStyle || "NO";
            this.isShowView = data.isShowView=="YES" ? true:false;
            this.searchFields = data.editSearchView || [];
            this.searchFields1 = data.queryStrategyView.map(item => {
                return {...item, defaultView: item.defaultView == "true",isShow: item.isShow == "true"};
            });
            this.handDataSourceSn();
            this.searchGroups = data.groupView || [];
        },
        handDataSourceSn(){
            this.searchFields1.forEach(item=>{
                if(item.sn>this.maxSn){
                    this.maxSn=item.sn;
                }
            })
        },
        getData() {
            return {
                editSearchView: this.parseNotFieldName(this.$refs['table_searchField'].getData()),
                queryStrategyView: this.$refs['table_searchView'].getData(),
                groupView:this.parseNotFieldName(this.$refs['table_searchGroup'].getData()),
                showSearchViewStyle: this.showSearchViewStyle,
                isShowView: this.isShowView?"YES":"NO"
            };
        },
        defaultViewChange(checked, record) {
            var table = this.$refs['table_'+this.activeKey];
            var rows = table.getData();
            for (var i = 0; i < rows.length; i++) {
                table.updateRow(rows[i], {defaultView: false});
            }
            record.defaultView = checked;
            if(checked){
                record.isShow = true;
            }
        },
        isShowChange(checked,record) {
            if(!checked) {
                record.defaultView = false;
            }
        },
        parseNotFieldName(ary){
            var data=[];
            ary.forEach(item=>{
                if(item.fieldName){
                    data.push(item);
                }
            })
            return data;
        },
        validName(name){
            var ary=this.searchFields1.filter(item=>{
                return item.name==name;
            })
            return ary.length>0;
        },
        showSearchViewEdit(record) {
            var self = this;
            var conf = {
                curVm: this,
                data: {
                    record: record,
                    fieldDatas: this.parseNotFieldName(this.$refs['table_searchField'].getData()),
                    validFunc:function(data){
                        if((!record || record.name!=data.name) && self.validName(data.name)){
                            self.$message.error(self.i18n('msg.viewNniqueTips','查询视图名称不能重复！'));
                            return false;
                        }
                        return true;
                    }
                },
                widthHeight: ['800px', '400px'],
            }
            Dialog.openSearchViewContent(conf,function(data){
                if (!record) {
                    self.searchFields1.push({
                        isNew: true,
                        name: data.name,
                        viewType: 'SYSTEM',
                        defaultView: false,
                        isShow:true,
                        sn:++self.maxSn,
                        queryCondition: JSON.stringify(data.queryCondition)
                    });
                } else {
                    record.name = data.name;
                    record.queryCondition = JSON.stringify(data.queryCondition);
                }
            })
        },
        fieldFocus(record) {
            this.curRecord = record;
        },
        filterOption(input, option) {
            this.curRecord["searchField"] = {label: input, key: input, change: true};
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        }
    },
}
</script>

<style scoped>
.title-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title-bar .fix-text {
    display: inline-block;
    position: relative;
    padding-left: 10px;
    color: #46494d;
    font-weight: bold;
}
.title-bar .fix-text:before{
    position: absolute;
    content: '';
    width: 2px;
    left: 0;
    top: 5px;
    height: 14px;
    background-color: #1890ff;
}

.is-seted {
    color: #70b90b;
    margin-left: 5px;
}

.search-view-seted-box {
    margin: 10px 0px;
}
.rx-modile-button{
    margin-left: 10px;
}
</style>